<template>
	<view class="app">
		<view class="send-info">
			<view class="send-conten">
				<textarea
				 v-model="contens"
				 auto-height
				 placeholder="请输入/100字以内"
				 show-confirm-bar></textarea>
				<view class="uni-icons">
					<uni-icons type="clear"  size="20"></uni-icons>
				</view>
			</view>
			<!-- <view class="up-file"> -->
				<view class="flex" style="flex-wrap:wrap;padding-top:20rpx;">
					<view v-for="(item, index) in pics" :key="index" class="layui-imgbox">
						<view class="layui-imgbox-close" @tap="removeimg" :data-index="index" data-field="pics"><image src="https://lt.caomei.zone/xcxstatic/static/img/ico-del.png"></image></view>
						<view class="layui-imgbox-img"><image :src="item" @tap="previewImage" :data-url="item" mode="widthFix"></image></view>
						<!-- <view class="layui-imgbox-repeat" @tap="xuanzhuan" :data-index="index" data-field="pics"><text class="fa fa-repeat"></text></view> -->
					</view>
					<view class="uploadbtn" :style="'background:url('+pre_url+'/static/img/shaitu_icon.png) no-repeat 60rpx;background-size:80rpx 80rpx;background-color:#F3F3F3;'" @tap="uploadimg" data-field="pics" v-if="pics.length<9">
						
					</view>
					
				</view>
			<!-- </view> -->
		</view>
		<view class="hr">
			
		</view>
		<view class="send-type">
			<view class="type-title">
				类型
			</view>
			<view :class="type_index==index?'pitch':'type-conten'" @click="changType(item.vlaue)" v-for="(item,index) in type">
				{{item.name}}
			</view>
		</view>
		<view class="send-btn" @click="submit()">
			发布
		</view>
	</view>
</template>

<script>
	var app = getApp()
	export default {
		data() {
			return {
				type:[{
					name:"资源",
					value:1
				},
				{
					name:"需求",
					value:2
				}],
				pics:[],
				type_index:0,//选中下标
				imageValue:[],
				pre_url:app.globalData.pre_url,
				contens:"",//内容
				cid:null,
				video:[],
				mobile:"",
			}
		},
		onLoad(e) {
			this.cid = 1
		},
		methods:{
			submit(){
				// console.log(JSON.stringify(this.pics))
				// console.log(this.pics)
				app.post('ApiLuntan/fatie', {type:this.type[this.type_index].value,cid:this.cid,pics:this.pics.join(","),content: this.contens,video: this.video,mobile: this.mobile}, function (res) {
				  app.showLoading(false);
				  // console.log(res)
				  if (res.status == 1) {
				    app.success(res.msg);
				    setTimeout(function () {
				      app.goback(true);
				    }, 1000);
				  } else {
				    app.error(res.msg);
				  }
				});
			},
				select(e){
							console.log('选择文件：',e)
						},
						uploadimg:function(e){
							var that = this;
							var field= e.currentTarget.dataset.field
							var pics = that[field]
							if(!pics) pics = [];
							app.chooseImage(function(urls){
								for(var i=0;i<urls.length;i++){
									pics.push(urls[i]);
								}
								if(field == 'pic') that.pic = pics;
								if(field == 'pics') that.pics = pics;
								if(field == 'zhengming') that.zhengming = pics;
							},9)
						},
						removeimg:function(e){
							var that = this;
							var index= e.currentTarget.dataset.index
							var field= e.currentTarget.dataset.field
							var pics = that[field]
							pics.splice(index,1)
						}
		}
	}
</script>

<style lang="less">
	.app{
		background-color: #FFFFFF;
		height: 99vh;
		margin-top: 1vh;
	}
	.send-info{
		background-color: #FFFFFF;
		width: 100%;
		min-height: 40vh;
		padding: 15rpx 10rpx;
		.send-conten{
			position: relative;
			min-height:10vh;
			width: 100%;
		}
		.up-file{
			width: 100%;
			min-height: 150rpx;
		}
		textarea{
			// min-height: 20rpx;
			width: 94%;
			min-height: 10vh;
			// overflow: unset !important;
		}
		.uni-icons{
			position: absolute;
			top: 50%;
			right: 1%;
			transform: translateY(-50%);
		}
	}
	.hr{
		width: 100vw;
		height: 1rpx;
		box-shadow: 0 1rpx #ececec;
		margin-left: 10rpx;
		// background-color: #000000;
	}
	.send-type{
		margin: 2% 0;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		.type-title{
			width: 20%;
			color: #000000;
			font-weight: 600;
			height: 70rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-family: unset;
		}
		.type-conten{
			width: 28%;
			height: 70rpx;
			background-color: #e7e7e7;
			color: #000000;
			font-family: unset;
			font-weight: 600;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 70rpx;
			margin: 0 2%;
		}
		.pitch{
			width: 28%;
			height: 70rpx;
			margin: 0 2%;
			border-radius: 70rpx;
			background-color: #994275;
			font-family: unset;
			font-weight: 600;
			color: #FFFFFF;
			display: flex;
			font-weight: 600;
			justify-content: center;
			align-items: center;
		}
	}
 .send-btn{
	 position: fixed;
	 bottom: 3%;
	 width: 95%;
	 height: 80rpx;
	 color: #FFFFFF;
	 background-color: #994275;
	 border-radius: 80rpx;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 // font-size: 1rem;
	 left: 50%;
	 transform: translateX(-50%);
 }
 .layui-imgbox{margin-right:16rpx;margin-bottom:10rpx;font-size:24rpx;position: relative;}
 .layui-imgbox-close{position: absolute;display: block;width:32rpx;height:32rpx;right:-16rpx;top:-16rpx;z-index:90;color:#999;font-size:32rpx;background:#fff}
 .layui-imgbox-close image{width:100%;height:100%}
 .layui-imgbox-img{display: block;width:200rpx;height:200rpx;padding:2px;border: #d3d3d3 1px solid;background-color: #f6f6f6;overflow:hidden}
 .layui-imgbox-img>image{max-width:100%;}
 .layui-imgbox-repeat{position: absolute;display: block;width:32rpx;height:32rpx;line-height:28rpx;right: 2px;bottom:2px;color:#999;font-size:30rpx;background:#fff}
 .uploadbtn{position:relative;height:200rpx;width:200rpx}
 .uploadbtn_ziti1{height:30rpx; line-height: 30rpx;font-size:30rpx; margin-top: 20rpx;}
 .uploadbtn_ziti2{height:30rpx; line-height: 30rpx;font-size:30rpx; padding-top: 20rpx; margin-top: 20rpx;border-top:1px solid #EEEEEE;}
</style>
